<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/14 0014
  Time: 9:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<body style="padding:0px" >
<style type="text/css">
    .grid{
        font:12px arial,helvetica,sans-serif;
        border: 0px solid #8DB2E3;width:100%;
        border-collapse:collapse
        height:800px;
    }
    .grid td{
        font:100% arial,helvetica,sans-serif;
        text-align: center;
        height:40px;
        border:1px solid #e0e0e0;
        padding-left:5px}
    .tdcc{
        width: 80px;
        background-color: rgb(250,250,250);
    }
    .tdcc1{
        width:150px;
    }
    .tdcc2{
        height: 80px;

    }
    .imgDelete{
        display: inline-block;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        background-color: #888;
        text-align: center;
        color: #fff;
        line-height: 16px;
        font-size: 12px;
        cursor: pointer;
        position: absolute;
        right: -8px;
        top: -8px;
    }
    .dragItemBox{
        position: relative;margin-right: 10px;margin-top: 5px;float: left;
    }
</style>
<script type="text/javascript" src="${staticPath }/static/ext/seller.js" charset="utf-8"></script>
<script type="text/javascript" src="${staticPath }/static/autoCompleteData.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        autoCompleteDate('${path}/user/address/autoCompleteData.do', 'autocomplete-ajax-edit', 'userInfo', 'autocomplete-ajax-edit-x');
    })
</script>
<script  type="text/javascript">
    $(function(){
        $.post("${path }/category/allTree.do",
            function(data){
                $.fn.zTree.init($("#categoryTree"),zTreeSetting, data);
            }, "json");
    });


    /**
     * 构建标签
     */
    function buildLabels(){
        var categoryIds = $("#categoryIds").val();
        if(categoryIds == null || categoryIds.length <= 0){
            $.messager.alert("系统提示", "先选择分类!","warning");
            return;
        }
        $("#cids").empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url:"${path }/label/buildLabelds.do",
            data: {"classifyIds": categoryIds},
            success: function(data){
                if(data.success){
                    $("#cids").append(data.msg);
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("删除失败", "服务器连接失败!","error");
            }
        });
    }


    $('#saveinfoSeller').form({
        url : '${path }/seller/add.do',
        onSubmit : function() {
            //点击获取编辑的内容
            var data = UE.getEditor('editor').getContent();
            $("#graphicDetails").val(data);

            var isValid = $(this).form('validate');
            if (!isValid) {
            }
            return isValid;
        },
        success : function(result) {
            if (result.success) {
                parent.$.modalDialog.handler.dialog('close');
                if (data.success) {
                    $.messager.show({
                        title: "保存成功",
                        msg: "保存成功!",
                        timeout: 600,
                        style: "left:30%;top:10%",
                        showType: "fade"
                    });
                } else {
                    parent.$.messager.alert('提示', eval(result.msg), 'error');
                }
            }
        },
        error:function(){
            $.messager.alert("删除失败", "服务器连接失败!","error");
        }
    });
</script>
<form id="saveinfoSeller" action="" method="post">
    <div class="easyui-tabs"  data-options="tabWidth:120"  style="width:100%;height:533px ;padding:0px">
        <!--商家基本信息Start-->
        <div title="商家基本信息"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <table class="grid" align="center">
                <tr >
                    <td  class="tdcc2" colspan="6"><h2>商家基本信息</h2></td>
                </tr>
                <tr>
                    <td class="tdcc">商家名称:</td>
                    <td class="tdcc1">  <input class="easyui-validatebox" name="name" data-options="required:true"/></td>
                    <td  class="tdcc">用户账号:</td>
                    <td tdcc1>
                        <%--<input class="easyui-validatebox" name="ord" data-options="required:true" placeholder="请输入注册手机号"/>--%>
                            <div style="position: relative;height:60px;width: 60px" >
                                <input type="text" name="userId" id="userInfo" value="" hidden/>
                                <input type="text" id="autocomplete-ajax-edit" class="easyui-validatebox" data-options="missingMessage:'请输入用户电话',required:true" style="position: absolute; z-index: 2; background: transparent;margin: 21px 40px 0 0; "/>
                                <input type="text" id="autocomplete-ajax-edit-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;margin: 21px 40px 0 0;"/>
                            </div>
                    </td>

                    <td colspan="2" rowspan="2"><img height="60px" width="60px" src="" id="tpyl"/></td>
                </tr>
                <tr>
                    <td class="tdcc">联系电话:</td>
                    <td class="tdcc1">  <input class="easyui-validatebox" name="tel" data-options="required:true"/></td>
                    <td class="tdcc">接收短信电话:</td>
                    <td class="tdcc1"> <input class="easyui-validatebox" name="phone" data-options="required:true"/></td>

                </tr>
                <tr>
                    <td class="tdcc">地址:</td>
                      <td class="tdcc1"><input class="easyui-validatebox" name="address" data-options="required:true"/></td>
                    <td class="tdcc">虚拟预约数量:</td>
                     <td class="tdcc1">  <input class="easyui-validatebox" name="virtualAppointmentCount" data-options="required:true"/></td>
                    <td colspan="2">
                        <div id="upload_ue"></div>
                        <span>商家logo:</span>
                        <input class="easyui-validatebox"  id="logo"  readonly="readonly"  name="logo" data-options="required:true"/>
                        <a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImage();">上传图片</a>
                    </td>
                    <script type="text/javascript">
                        var _editor;
                        $(function() {
                            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                            _editor = UE.getEditor('upload_ue',{
                                serverUrl:"${path}/file/upload.do?compress=1"
                            });

                            _editor.ready(function () {
                                //设置编辑器不可用
                                // _editor.setDisabled();
                                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                _editor.hide();
                                //侦听图片上传
                                _editor.addListener('beforeInsertImage', function (t, arg) {
                                    //有多少张图片arg.length就是多大
                                    $("#logo").val(arg[0].src);
                                    $("#tpyl").attr("src",arg[0].src);
                                });
                            });
                        });
                        //弹出图片上传的对话框
                        function upImage() {
                            var myImage = _editor.getDialog("insertimage");
                            myImage.open();
                        }
                    </script>
                </tr>
                <tr>
                    <td class="tdcc">虚拟评论数量:</td>
                     <td class="tdcc1">  <input class="easyui-validatebox" name="virtaulCommentCount" data-options="required:true"/></td>
                    <td class="tdcc">虚拟收藏数:</td>
                    <td class="tdcc1"> <input class="easyui-validatebox" name="virtualCollectAccount" data-options="required:true"/></td>
                    <td  class="tdcc">排序:</td>
                    <td tdcc1><input class="easyui-validatebox" name="ord" data-options="required:true"/></td>
                </tr>
                <tr>
                    <td class="tdcc">省份:</td>
                    <td class="tdcc1">
                        <input type="hidden" value="" name="provinceName" id="provinceName">
                        <input id="delivery_address_province" class="easyui-combobox"  name="provinceId"  value=""
                               data-options="missingMessage:'请选择省份',
                                         url:'${path}/areaInfo/addressList.do?type=1',
                                         valueField:'id',
                                         textField:'name',
                                         required:true,
                                         editable:false,
                                         onLoadSuccess:function(data){
                                            console.log(data);
                                            <%--if(province != 0){--%>
                                                <%--$(this).combobox('setValue',province);--%>
                                            <%--}else{--%>
                                                <%--$(this).combobox('setValue',data[0].id);--%>
                                            <%--}--%>
                                            if (data.length > 0) {
                                                $(this).combobox('setValue',data[0].id);
                                                $('#provinceName').val(data[0].name);
                                            } else {
                                                $('#provinceName').val('');
                                            }
                                         },
                                         onChange: function (newValue, oldValue){
                                             $('#delivery_address_city').combobox('reload','${path}/areaInfo/addressList.do?type=2&pid='+newValue);
                                         },
                                         onSelect:function(data){
                                             <%--province = 0;--%>
                                             <%--city = 0;--%>
                                             <%--area = 0;--%>
                                           $('#provinceName').val(data.name);
                                         }" />
                    </td>
                    <td class="tdcc">城市:</td>

                    <td class="tdcc1">
                        <input type="hidden" value="" name="cityName" id="cityName">
                        <input id="delivery_address_city" class="easyui-combobox "  name="cityId"  value=""
                                                 data-options="missingMessage:'请选择城市',
                                         valueField:'id',
                                         textField:'name',
                                         required:true,
                                         editable:false,
                                         onLoadSuccess:function(data){
                                            <%--if(city != 0){--%>
                                                <%--$(this).combobox('setValue',city);--%>
                                            <%--}else{--%>
                                                <%--$(this).combobox('setValue',data[0].id);--%>
                                                <%--$('#edit_cityId').val(data[0].id);--%>
                                                <%--$('#edit_city').val(data[0].name);--%>
                                            <%--}--%>
                                            if (data.length > 0 ) {
                                                $(this).combobox('setValue',data[0].id);
                                                $('#cityName').val(data[0].name);
                                            } else {
                                                $('#delivery_address_city').combobox('clear');
                                                $('#cityName').val('');
                                            }
                                         },
                                         onChange: function (newValue, oldValue){
                                             $('#delivery_address_area').combobox('reload','${path}/areaInfo/addressList.do?type=3&pid='+newValue);
                                         },
                                         onSelect:function(data){
                                             <%--city = 0;--%>
                                             <%--area = 0;--%>
                                             <%--$('#edit_cityId').val(data.id);--%>
                                             $('#cityName').val(data.name);
                                         }"/> </td>
                    <td  class="tdcc">区域:</td>
                    <td class="tdcc1">
                        <input type="hidden" value="" name="areaName" id="areaName">
                        <input id="delivery_address_area" class="easyui-combobox "  name="areaId"  value=""
                                                data-options="missingMessage:'请选择区县' ,
                                         valueField:'id' ,
                                         textField:'name',
                                         editable:false,
                                         onLoadSuccess:function(data){
                                            <%--if(area != 0){--%>
                                                <%--$(this).combobox('setValue',area);--%>
                                            <%--}else{--%>
                                                <%--$(this).combobox('setValue',data[0].id);--%>
                                                <%--$('#edit_areaId').val(data[0].id);--%>
                                                <%--$('#edit_area').val(data[0].name);--%>
                                            <%--}--%>
                                            if (data.length > 0) {
                                                $(this).combobox('setValue',data[0].id);
                                                $('#areaName').val(data[0].name);
                                            } else {
                                                $('#delivery_address_area').combobox('clear');
                                                $('#areaName').val('');
                                            }
                                         },
                                         onSelect:function(data){
                                             <%--area = 0;--%>
                                             <%--$('#edit_areaId').val(data.id);--%>
                                           $('#areaName').val(data.name);
                                         }" />
                    </td>
                </tr>
                <tr>
                    <td class="tdcc">营业时间通知:</td>
                    <td class="tdcc1"><textarea  name="businessHours" class="easyui-validatebox" data-options="required:true" style="width: 140px   ; height: 80px;resize:none;" placeholder="营业时间，体检时间文本"></textarea></td>
                    <td class="tdcc">机构简介:</td>
                    <td  colspan="3" class="tdcc1"> <textarea  name="des" class="easyui-validatebox" data-options="required:true" style="width: 500px   ; height: 80px;resize:none;" placeholder="机构简介文本"></textarea></td>
                </tr>


            </table>
        </div>
        <!--****************************************************end**********************************************************************************************************************************************************************************************************-->
        <!--商家标签-->
        <div title="商家标签"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <table>
            <tr>
                <td>商家分类:</td>
                <td>
                    <input id="categoryNames" name="categoryNames" type="text" readonly value="" style="width:150px;" onclick="showMenu('categoryNames');" />
                    <input id="categoryIds" type="hidden" name="categoryIds" />
                    <a href="javascript:void(0);"  class="easyui-linkbutton" onclick="buildLabels();">加载标签</a>
                    <div id="categoryTreeContent" class="categoryTreeContent" style="display:none; position: absolute;">
                        <ul id="categoryTree" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
                    </div>
                </td>
            </tr>
                <tr id="cids">


                </tr>

            </table>


        </div>
        <!--****************************************************end**********************************************************************************************************************************************************************************************************-->
        <div title="商家图片"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <script type="text/javascript">
//============================================单图============================================
                <%--删除图片点击事件--%>
                function deteleImgSingle(obj){
                    $(obj).parents("#hospitalSingle").find("img").remove();
                    $(obj).remove();
                    $("#hospitalSingleInput").val("");
                }
                var _editor2;
                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                _editor2 = UE.getEditor('upload_ue2',{
                    serverUrl:"${path}/file/upload.do?compress=1"
                });
                _editor2.ready(function () {
                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                    _editor2.hide();
                    //侦听图片上传
                    _editor2.addListener('beforeInsertImage', function (t,arg) {
                        $("#hospitalSingle").html(
                            '<img src="'+arg[arg.length-1].src+'"   alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">' +
                            '<span class="imgDelete" onclick="deteleImgSingle(this)">x</span>');
                        $("#hospitalSingleInput").val(arg[arg.length-1].src);
                    });
                });
                //弹出单张图片上传的对话框
                function upImageSingle() {
                    var myImage = _editor2.getDialog("insertimage");
                    myImage.open();
                }

//============================================多图============================================
                <%--删除图片点击事件--%>
                var arrSrc = [];//初始一个数组存放图片路径
                function deteleImgGroup(obj){
                   // var src = $(obj).prev().attr("src");
                    var index = $(obj).parent().index();
                    $(obj).parent().remove();
                    arrSrc.splice(index,1);
                    $("#hospitalGroupInput").val(arrSrc.join(','));
                }
                var _editor3;
                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                _editor3 = UE.getEditor('upload_ue3',{
                    serverUrl:"${path}/file/upload.do?compress=1"
                });


                _editor3.ready(function () {
                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                    _editor3.hide();
                    //侦听图片上传
                    _editor3.addListener('beforeInsertImage', function (t,arg) {
                        arg.map(function(ele,index){
                            $("#hospitalGroup").append(
                                '<div class="dragItemBox">'+
                                '<img src="'+ele.src+'" alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">'+
                                '<span class="imgDelete" onclick="deteleImgGroup(this)">x</span>'+
                                '</div>'
                            );
                            arrSrc.push(ele.src);
                        });
//                        每次上传事件触发都重新绑定拖拽事件
                        $('.dragItemBox').unbind('draggable');

                        $('.dragItemBox').draggable({
                            deltaX:0,
                            deltaY:0
                        }).droppable({
                            onDrop:function(e,source){
                                $(source).after(this);
                                $(source).removeAttr('style').siblings().removeAttr('style');
//                                顺序修改后需要重新修改上传的input值

                                arrSrc = [];
                                $(this).parent().find('.dragItemBox img').each(function(){
                                    arrSrc.push($(this).attr('src'));
                                });
                                $("#hospitalGroupInput").val(arrSrc.join(","));


                            }
                        });


                        $("#hospitalGroupInput").val(arrSrc.join(","));
                    });
                });
                //弹出单张图片上传的对话框
                function upImageGroup(){
                    var myImage = _editor3.getDialog("insertimage");
                    myImage.open();
                }


            </script>

            <p>商家图片</p>
            <hr/>
            <table border="0">
                <tr>
                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageSingle();">上传单张图片</a></td>
                </tr>
                <tr>
                    <td>
                        <div id="upload_ue2"></div>
                        <input type="hidden" id="hospitalSingleInput" name="img">
                        <div style="position: relative;float: left;margin-top: 5px;" id="hospitalSingle">

                        </div>
                    </td>
                </tr>
            </table>
            <hr/>
            <table border="0">
                <tr>
                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageGroup();">上传多张图片</a></td>
                </tr>
                <tr>
                    <td>
                        <div id="upload_ue3"></div>
                        <input type="hidden" id="hospitalGroupInput" name="imgsUrl">
                        <div id="hospitalGroup">

                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <!--************************************************************************************************end*********************************************************************************************************************************************************-->

        <div title="图文详情" data-options="iconCls:'icon-edit'" style="padding:20px">
            <div>
                <input type="hidden" id="graphicDetails" name="detail" value="">
                <div id="editor" style="height:500px;"></div>
                <div id="btns">
                    <div>
                        <button onclick="getAllHtml()">获得整个html的内容</button>
                        <button onclick="getContent()">获得内容</button>
                        <button onclick="setContent()">写入内容</button>
                        <button onclick="setContent(true)">追加内容</button>
                        <button onclick="getContentTxt()">获得纯文本</button>
                        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
                        <button onclick="hasContent()">判断是否有内容</button>
                        <button onclick="setFocus()">使编辑器获得焦点</button>
                        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
                        <button onmousedown="setblur(event)" >编辑器失去焦点</button>
                    </div>
                    <div>
                        <button onclick="getText()">获得当前选中的文本</button>
                        <button onclick="insertHtml()">插入给定的内容</button>
                        <button id="enable" onclick="setEnabled()">可以编辑</button>
                        <button onclick="setDisabled()">不可编辑</button>
                        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
                        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
                        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
                    </div>

                    <div>
                        <button onclick="getLocalData()" >获取草稿箱内容</button>
                        <button onclick="clearLocalData()" >清空草稿箱</button>
                    </div>

                </div>
                <div>
                    <button onclick="createEditor()">
                        创建编辑器</button>
                    <button onclick="deleteEditor()">
                        删除编辑器</button>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            UE.delEditor('editor');
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor',{
                serverUrl:"${path}/file/upload.do"
            });

            function isFocus(e){
                alert(UE.getEditor('editor').isFocus());
                UE.dom.domUtils.preventDefault(e)
            }
            function setblur(e){
                UE.getEditor('editor').blur();
                UE.dom.domUtils.preventDefault(e)
            }
            function insertHtml() {
                var value = prompt('插入html代码', '');
                UE.getEditor('editor').execCommand('insertHtml', value)
            }
            function createEditor() {
                enableBtn();
                UE.getEditor('editor');
            }
            function getAllHtml() {
                alert(UE.getEditor('editor').getAllHtml())
            }
            function getContent() {
                var arr = [];
                arr.push("使用editor.getContent()方法可以获得编辑器的内容");
                arr.push("内容为：");
                arr.push(UE.getEditor('editor').getContent());
                alert(arr.join("\n"));
            }
            function getPlainTxt() {
                var arr = [];
                arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
                arr.push("内容为：");
                arr.push(UE.getEditor('editor').getPlainTxt());
                alert(arr.join('\n'))
            }
            function setContent(isAppendTo) {
                var arr = [];
                arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
                UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
                alert(arr.join("\n"));
            }
            function setDisabled() {
                UE.getEditor('editor').setDisabled('fullscreen');
                disableBtn("enable");
            }

            function setEnabled() {
                UE.getEditor('editor').setEnabled();
                enableBtn();
            }

            function getText() {
                //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
                var range = UE.getEditor('editor').selection.getRange();
                range.select();
                var txt = UE.getEditor('editor').selection.getText();
                alert(txt)
            }

            function getContentTxt() {
                var arr = [];
                arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
                arr.push("编辑器的纯文本内容为：");
                arr.push(UE.getEditor('editor').getContentTxt());
                alert(arr.join("\n"));
            }
            function hasContent() {
                var arr = [];
                arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
                arr.push("判断结果为：");
                arr.push(UE.getEditor('editor').hasContents());
                alert(arr.join("\n"));
            }
            function setFocus() {
                UE.getEditor('editor').focus();
            }
            function deleteEditor() {
                disableBtn();
                UE.getEditor('editor').destroy();
            }
            function disableBtn(str) {
                var div = document.getElementById('btns');
                var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                for (var i = 0, btn; btn = btns[i++];) {
                    if (btn.id == str) {
                        UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                    } else {
                        btn.setAttribute("disabled", "true");
                    }
                }
            }
            function enableBtn() {
                var div = document.getElementById('btns');
                var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                for (var i = 0, btn; btn = btns[i++];) {
                    UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                }
            }

            function getLocalData () {
                alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
            }

            function clearLocalData () {
                UE.getEditor('editor').execCommand( "clearlocaldata" );
                alert("已清空草稿箱")
            }
        </script>
    </div>
</form>
</body>
</html>
